<template>
    <van-grid :border="false" :column-num="3">
      <van-grid-item 
        v-for="(item, index) in gridItems" 
        :key="index" 
        :text="item.text" 
        :to="item.to"
      >
        <van-image
          round
          width="7rem"
          height="7rem"
          :src="item.image"
        />
        <span>{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="3">
      <van-grid-item 
        v-for="(item, index) in gridItems" 
        :key="index" 
        :text="item.text" 
        :to="item.to"
      >
        <van-image
          round
          width="7rem"
          height="7rem"
          :src="item.image"
        />
        <span>{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
  </template>
  
  <script setup>
  const gridItems = [
    { text: "环保基础知识", to: "/homeviewtwo/1", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
    { text: "法律解读", to: "/homeviewtwo/2", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
    { text: "志愿服务", to: "/homeviewtwo/3", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
  ];
  const gridItems2 = [
    { text: "视频", to: "/homeviewtwo/4", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
    { text: "文献", to: "/homeviewtwo/5", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
    { text: "论坛", to: "/homeviewtwo/6", image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
  ];
  </script>